<template>
	<view>
		<view class="can">
			<canvas :style="{ 'margin-top':canvasH/10 + 'px',width: canvasW + 'px', height: canvasH + 'px'}"
				canvas-id="myCanvas"></canvas>
		</view>
		<view class="botton" v-show="show">
			<button @click="preserve">保存</button>
		</view>
	</view>
</template>

<script>
	var rpx
	export default {
		data() {
			return {
				canvasW: 690, // 画布宽
				canvasH: 800, // 画布高
				// 头像
				headImg: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2994867177,1065982860&fm=26&gp=0.jpg',
				// 二维码图片
				ewmImg: 'https://scpic.chinaz.net/Files/pic/pic9/202103/bpic22693_s.jpg',
				name: '超级无敌',
				brief: '宇宙之心',
				phone: '13614725836',
				company: '行业公司',
				site: '长沙市雨花区岳麓书院',
				str: '长按识别二维码，加好友',
				//是否显示按钮
				show: false,
				imgsrc: '',
			}
		},
		onLoad() {
			// 获取设备信息，主要获取宽高
			let that = this
			uni.getSystemInfo({
				success(res) {
					rpx = res.windowWidth / 750;
					that.canvasW = that.canvasW * rpx
					that.canvasH = that.canvasH * rpx
				}
			})
			// 请求海报数据
			this.canvas()
		},
		methods: {
			canvas() {
				let that = this
				this.$operate.toast({
					title: '加载中...',
					icon: 'loading',
				})
				uni.hideLoading()
				//定时器，等页面渲染完成
				setTimeout(function() {
					that.drawa()
				}, 2000);
			},
			async drawa() {
				this.$operate.toast({
					title: '名片生成中...',
					icon: 'loading',
					mask: true
				})
				let that = this
				let image = this.headImg; //图片地址
				let qrcode = this.ewmImg; //小程序码址址

				// 初始化canvas画布
				const ctx = uni.createCanvasContext('myCanvas')
				this.roundRect(ctx, 0, 0, that.canvasW, that.canvasH, 10, '#ffffff', 'all')
				// 获取图片绘制
				let res = await that.$operate.getImageInfo(image);
				//设置圆形图片
				// this.drawCircular(ctx, res.path, 40 * rpx, 24 * rpx, 120 * rpx, 120 * rpx)

				//绘制文字
				//文字颜色：默认黑色
				ctx.setFillStyle('#333333')
				//设置字体大小，默认10
				ctx.setFontSize(25)
				// 设置位置
				ctx.textAlign = 'left'
				// 字体样式
				ctx.font = 'normal 12px sans-serif'
				// 文字内容 , 宽度, 高度
				ctx.fillText(that.name, 40 * rpx, 60 * rpx)

				ctx.setFillStyle('#AAAAAA')
				//设置字体大小，默认10
				ctx.setFontSize(15)
				ctx.fillText(that.brief, 40 * rpx, 120 * rpx)

				ctx.setFillStyle('#999999')
				//设置字体大小，默认10
				ctx.setFontSize(12)
				ctx.fillText(that.phone, 40 * rpx, 250 * rpx)
				ctx.fillText(that.company, 40 * rpx, 300 * rpx)
				ctx.fillText(that.site, 40 * rpx, 350 * rpx)


				// this.drawCircular(ctx, res.path, 250 * rpx, 54 * rpx, 120 * rpx, 120 * rpx)
				//狐形
				// h5 上面头像设置完全失效 建议小程序运行
				this.arcShaped(ctx, res.path)

				//个人信息背景
				//绘制图形
				that.roundRect(ctx, 0, 380 * rpx, 690 * rpx, 420 * rpx, 10,
					'#f7f7f7', 'bottom')
				let ress = await that.$operate.getImageInfo(qrcode);
				ctx.drawImage(ress.path, 200 * rpx, 420 * rpx, 290 *
					rpx, 290 * rpx)
				//提示文字
				ctx.fillText(that.str, (that.canvasW - ctx.measureText(
					that.str).width) / 2, 750 * rpx)
				// 执行绘制方法
				ctx.draw()
				//隐藏加载
				uni.hideLoading();
				// 显示保存按钮
				that.show = true
			},
			//狐形
			arcShaped(ctx, url) {
				ctx.save();
				//开始一个新的绘制路径
				ctx.beginPath();
				//设置路径起点坐标
				//左上
				ctx.moveTo(520 * rpx, 0 * rpx)
				//右上
				ctx.lineTo(670 * rpx, 0 * rpx);
				//右圆角
				ctx.arc(690 * rpx - 20 * rpx, 20 * rpx, 20 * rpx, Math.PI * 3 / 2, Math.PI * 2);
				//右下
				ctx.lineTo(690 * rpx, 377 * rpx);
				//左下
				//左下角圆弧，弧度从1/2PI到PI
				ctx.arc(550 * rpx, 377 * rpx - 180 * rpx, 180 * rpx, Math.PI / 2, Math.PI);
				// ctx.lineTo(580 * rpx, 375 * rpx);
				//左上角圆弧，弧度从PI到3/2PI
				ctx.arc(550 * rpx, 180 * rpx, 180 * rpx, Math.PI, Math.PI * 3 / 2);
				//先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
				ctx.closePath();
				ctx.clip();
				//边框颜色
				ctx.strokeStyle = "#FFFFFF"; //填充边框颜色
				ctx.stroke(); //画线轮廓
				ctx.drawImage(url, 120 * rpx, 0 * rpx, 620 * rpx, 391 * rpx);
				ctx.restore();
			},
			//画圆形头像
			drawCircular(ctx, url, x, y, width, height) {
				// ctx为画布对象，url为图片地址，x为画布x轴位置，y为画布y轴位置，width为图像宽度，height为图像高度。
				let radius, diameter
				//以最短的边为半径绘制圆
				if (width > height) {
					radius = height / 2;
				} else {
					radius = width / 2;
				}
				diameter = radius * 2;
				ctx.save();
				ctx.beginPath();
				ctx.arc(x + radius, y + radius, radius, 0, Math.PI * 2, false);
				ctx.clip();
				ctx.drawImage(url, x, y, diameter, diameter);
				ctx.restore();
			},
			// 圆角矩形
			roundRect(ctx, x, y, w, h, r, colo, direction) {
				//圆的直径必然要小于矩形的宽高          
				if (2 * r > w || 2 * r > h) {
					return false;
				}
				ctx.save();
				ctx.translate(x, y);
				//绘制圆角矩形的各个边  
				this.drawRoundRectPath(ctx, w, h, r, direction);

				ctx.fillStyle = colo || "#000"; //若是给定了值就用给定的值否则给予默认值  
				ctx.fill();
				ctx.restore();
			},
			// 生成圆角
			drawRoundRectPath(ctx, width, height, radius, direction) {
				ctx.beginPath(0);
				if (direction == 'all') {
					//从右下角顺时针绘制，弧度从0到1/2PI
					ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
					//矩形下边线  
					ctx.lineTo(radius, height);
					//左下角圆弧，弧度从1/2PI到PI  
					ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
					//矩形左边线  
					ctx.lineTo(0, radius);
					//左上角圆弧，弧度从PI到3/2PI
					ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
					//上边线  
					ctx.lineTo(width - radius, 0);
					//右上角圆弧  
					ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
					ctx.lineTo(width, height - radius);
				}
				if (direction == 'bottom') { //上圆角
					//从右下角顺时针绘制，弧度从0到1/2PI
					ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
					//矩形下边线  
					ctx.lineTo(radius, height);
					//左下角圆弧，弧度从1/2PI到PI  
					ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
					//矩形左边线  
					ctx.lineTo(0, 0);
					//上边线  
					ctx.lineTo(width, 0);

					ctx.lineTo(width, height);
				}
				if (direction == 'top') { //下圆角
					ctx.lineTo(0, height);
					//左下角圆弧，弧度从1/2PI到PI  
					ctx.lineTo(0, 0);
					//左上角圆弧，弧度从PI到3/2PI
					ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
					//上边线  
					ctx.lineTo(width - radius, 0);
					//右上角圆弧  
					ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
					ctx.lineTo(width, height)
				}
				ctx.closePath();
			},
			//保存
			preserve() {
				this.$operate.toast({
					title: '名片保存中...',
					icon: 'loading',
					mask: true
				})

				let tempRatio = 1.5;
				let that = this

				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.canvasW * tempRatio,
					height: this.canvasH * tempRatio,
					destWidth: this.canvasW * tempRatio * 5,
					destHeight: this.canvasH * tempRatio * 5,
					canvasId: 'myCanvas',
					success(res) {
						// console.log(res);
						uni.hideLoading()
						// 保存图片到系统相册
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								// console.log(res);
								that.$operate.toast({
									title: '成功保存到相册'
								})
								that.imgsrc = res.tempFilePath
							},
							fail(ress) {
								if (ress.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '授权图片保存到相册',
										success(re) {
											if (re.confirm) {
												// 打开授权页面
												uni.openSetting({})
											}
										}
									})
								}
							}
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #C8C7CC;
	}

	.can {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.botton{
		margin: 20rpx;
	}
</style>
